<template>
  <div class="home">
    <el-container class="container">
      <el-header class="header">
        <div class="header-left">
          <img src="@/assets/img/logo.png" alt />
          管理系统
        </div>
        <div class="header-right">
          <el-button class="btn">信息</el-button>
        </div>
      </el-header>
      <!-- 左侧菜单栏 -->
      <el-container class="aside_main">
        <el-aside class="aisde" width="200px">
          <el-menu
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :unique-opened="true"
            :collapse="false"
            :collapse-transition="false"
            :router="true"
          >
            <el-submenu :index="item.id + ''" v-for="item in sliderData" :key="item.id">
              <template slot="title">
                <i class="iconfont" :class="item.icon" style="margin-right:10px"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item :index="item1.path" v-for="item1 in item.children" :key="item1.id">
                <template slot="title">
                  <i class="iconfont" :class="item1.icon"></i>
                  <span style="margin-left: 10px">{{ item1.name }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 主体内容区 -->
        <el-main class="main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
//引入装饰器
import { Component, Provide, Vue } from 'vue-property-decorator'
import { State, Getter, Mutation, Action } from "vuex-class"
import app from "@/utils/url"
@Component({
  components: {}
})

export default class Home extends Vue {
  @Getter("user") getuser: any;//获取state中的数据
  @Provide() sliderData: any = null
  toLogin(): void {
    this.$router.push({
      path: '/login',
    })
  };
  created() {
    (this as any).$axios.get(app.getsilder).then((res: any) => {
      this.sliderData = res.data
    }).catch((err: any) => console.log(err)
    )
  }
  mounted() {
    console.log('query:', this.$route.query);//接收上个页面传来的参数
    console.log(this.getuser)//获取到用户的登录信息
  }

}
</script>

<style lang="scss" scoped>
.container {
  position: absolute; //继承父元素的高度
  height: 100%;
  width: 100%;
  background-color: aqua;
  .header {
    height: 80px !important;
    width: 100% !important;
    background-color: azure;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-left {
      img {
        width: 50px;
        border-radius: 50%;
        border: 2px solid #eee;
        transform: rotate(0deg);
        transition: all ease 0.5s;
      }
      img:hover {
        transform: rotateX(180deg);
        transition: all ease 0.5s;
        background-color: #000;
      }
    }
    .header-right {
      .btn {
        width: 100px;
      }
      .btn:hover {
        width: 200px;
        transition: all ease 0.5s;
      }
    }
  }
  .aside_main {
    .aisde {
      background-color: beige;
      .el-menu {
        border-right-width: 0; //消除展开菜单的突出
      }
    }
    .main {
      background-color: rgb(231, 201, 163);
    }
  }
}
</style>